<#macro html title="" jslib=[] csslib=[]><#assign ctx><@spring.url relativeUrl=""/></#assign>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>${title}</title>
    <script src="${ctx}/webjars/jquery/1.11.1/jquery.min.js"></script>
    <script src="${ctx}/webjars/jquery-migrate/1.4.0/jquery-migrate.min.js"></script>
    <script src="${ctx}/webjars/smartpage/json2.js"></script>

<#--bootstrap-->
    <link rel="stylesheet" href="${ctx}/webjars/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="${ctx}/webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<#--mustache-->
    <script src="${ctx}/webjars/mustache/2.2.1/mustache.min.js"></script>

<#--validationEngine-->
    <link rel="stylesheet" href="${ctx}/webjars/validationEngine/css/validationEngine.jquery.css">
    <script src="${ctx}/webjars/validationEngine/js/jquery.validationEngine.min.js"></script>
    <script src="${ctx}/webjars/validationEngine/js/jquery.validationEngine-zh_CN.js"></script>
<#--laydate    -->
    <script src="${ctx}/webjars/laydate/laydate.js"></script>

<#--core-->
    <link rel="stylesheet" href="${ctx}/webjars/smartpage/core.css">
    <script src="${ctx}/webjars/smartpage/core.js"></script>

    <script>
        SP.contexPath = "${ctx}";
    </script>

    <#list jslib as js>
        <script src="${js}"></script>
    </#list>
    <#list csslib as css>
        <link rel="stylesheet" href="${css}">
    </#list>
</head>
<body>
    <#nested />
<script>
    function jumpTo(href) {
        location.href = href;
    }
</script>
</body>
</html>
</#macro>

<#macro panel id="" title="" class="">
<div class="panel <#if class?has_content>${class}<#else>panel-default</#if>"
     <#if id?has_content>id="${id}"</#if>>
    <#if title?has_content>
        <div class="panel-heading">
        ${title}
        </div>
    </#if>
    <div class="panel-body">
        <#nested />
    </div>
</div>
</#macro>


<#macro pagination value showNumber=9 class="">
<#-- @ftlvariable name="value" type="org.springframework.data.domain.Page" -->
    <#if value.totalPages gt 1>
        <#assign currentNumber = value.number/>
        <#assign middle = (showNumber/2)?int + 1/>
        <#assign left = middle -1 />
        <#assign right = showNumber - middle />

        <#assign start = Math.max(0,currentNumber-left)/>
        <#assign end = Math.min(value.totalPages,currentNumber+right)-1/>

    <nav aria-label="Slayk Pagination">
        <ul class="pagination ${class}">
            <li class="disabled">
                <a href="#" onclick="return false;">共${value.totalElements}条记录/分${value.totalPages}页显示</a>
            </li>
            <#if value.hasPrevious()>
                <li><a href="${@('page',currentNumber-1)}" aria-label="Previous"><span
                        aria-hidden="true">&laquo;</span></a></li>
            </#if>
            <#list start..end as i>
                <#if i==currentNumber>
                    <li class="active"><a href="${@('page',i)}">${i+1}<span class="sr-only">(current)</span></a>
                    </li>
                <#else >
                    <li><a href="${@('page',i)}">${i+1}</a></li>
                </#if>
            </#list>
            <#if value.hasNext()>
                <li><a aria-label="Next" href="${@('page',currentNumber+1)}"><span aria-hidden="true">»</span></a></li>
            </#if>
        </ul>
    </nav>
    </#if>
</#macro>

<#macro wizard steps=[] activeStep=0 class="">
<script src="${ctx}/webjars/jquery-ui/1.11.4/jquery-ui.js"></script>
<script src="${ctx}/webjars/underscorejs/1.8.3/underscore.js"></script>
<#--gridstack-->
<link rel="stylesheet" href="${ctx}/webjars/gridstack/gridstack.min.css">
<link rel="stylesheet" href="${ctx}/webjars/gridstack/gridstack-extra.min.css">
<script src="${ctx}/webjars/gridstack/gridstack.js"></script>

<#--propanellayout-->
<script src="${ctx}/webjars/propanellayout/velocity.min.js"></script>
<script src="${ctx}/webjars/propanellayout/propanellayout.js"></script>
<link rel="stylesheet" href="${ctx}/webjars/propanellayout/propanellayout.css">

<#--colorpicker-->
<link rel="stylesheet" href="${ctx}/webjars/colorpicker/css/bootstrap-colorpicker.css">
<script src="${ctx}/webjars/colorpicker/js/bootstrap-colorpicker.min.js"></script>

<#-- bootstrapswitch-->
<link rel="stylesheet" href="${ctx}/webjars/bootstrapswitch/css/bootstrap3/bootstrap-switch.min.css">
<script src="${ctx}/webjars/bootstrapswitch/js/bootstrap-switch.min.js"></script>

<ul class="nav nav-wizard ${class}">
    <#list steps as step>
        <li class="<#if activeStep==step_index>active</#if><#if step.disabled> disabled</#if>">
            <#if step.disabled>
                <a href="javascript:void(0)">${step.name}</a>
            <#else >
                <a href="${step.url}">${step.name}</a>
            </#if>
        </li>
    </#list>
</ul>
</#macro>

<#macro designerWizard activeStep=0>
    <#assign prefix><@spring.url relativeUrl="/sp"/></#assign>
    <#local isCreate = !containerId?has_content/>
    <#local hasLayout = !layout?has_content/>
<div class="container-fluid" style="padding: 20px 0px" id="designer-wizard">
    <div class="col-xs-2">
        <h4><a href="${prefix}/containers">界面设计器</a></h4>
    </div>
    <div class="col-xs-10">
        <@wizard steps=[
        {"url":"${prefix}/addContainer?containerId=${containerId}","name":"创建/编辑容器","disabled":false},
        {"url":"${prefix}/addLayout?containerId=${containerId}","name":"创建/编辑布局","disabled":isCreate},
        {"url":"${prefix}/addWidget?containerId=${containerId}","name":"添加/编辑组件","disabled":hasLayout},
        {"url":"${prefix}/dataBinding?containerId=${containerId}","name":"字段定义","disabled":!hasWidget}
        ] activeStep = activeStep class="pull-right"/>
    </div>
</div>
</#macro>

<#macro controlWizard activeStep=0><#assign prefix><@spring.url relativeUrl="/sp"/></#assign>
<div class="container-fluid" style="padding: 20px 0px">
    <div class="col-xs-2">
        <h4><a href="${prefix}/containers">界面设计器</a></h4>
    </div>
    <div class="col-xs-10">
        <@wizard steps=[
        {"url":"${prefix}/layoutControlInfo?layoutId=${RequestParameters.layoutId}","name":"编辑名称","disabled":false},
        {"url":"${prefix}/layoutControl?layoutId=${RequestParameters.layoutId}","name":"编辑布局","disabled":false},
        {"url":"${prefix}/widgetControl?layoutId=${RequestParameters.layoutId}","name":"编辑组件","disabled":false}
        ] activeStep = activeStep class="pull-right"/>
    </div>
</div>
</#macro>

<#macro panelLayoutScript>
    <#assign prefix><@spring.url relativeUrl="/sp"/></#assign>
<script>
    function initEditorEvent() {
        $('.colorpicker-component').colorpicker().on("hidePicker", function (e) {
            $(e.target).find("input").trigger("change")
        });
        $(".bootstrap-switch").bootstrapSwitch().on('switchChange.bootstrapSwitch', function (event, state) {
            var contentId = $(event.target).attr("data-content-id");
            var mode = state ? "edit" : "view";
            $.post("${prefix}/saveContentMode?r=" + Math.random(), {contentId: contentId, mode: mode}, function () {
                location.reload();
            });
        });
        $(".aligns button").unbind().click(function () {
            $(this).siblings("button").removeClass("active").end().toggleClass("active");
            var val = $(this).is(".active") ? $(this).attr("data-align") : "";
            $(".aligns input").val(val).trigger("change");
        });
    }

    $("#editors").find("form").live("change", function () {
        var _form = $(this);
        var _id = _form.find("input[name=id]").val();
        var _url = _form.attr("action");
        $.post(_url, _form.serialize(), function (style) {
            if (_url.indexOf("Global") > 0) {
                location.reload();
            }
            $("[data-id=" + _id + "]").attr("style", style);
        });
    });

    $(function () {
        $.silvercore.proOuterPanel.prototype.options.persist = '';
        $('#designer').proPanelLayout({
            viewport: true,
            north: {
                element: '#north'
            },
            center: {
                element: '#center',
                minWidth: 600
            },
            east: {
                element: '#east',
                size: 315
            }
        });
    });
</script>
</#macro>

<#macro widgetScript>
    <#assign prefix><@spring.url relativeUrl="/sp"/></#assign>
<script>
    function guessItemId() {
        var item;
        var emptyLayoutItems = $(".layout-item:not(:has('.smart-widget'))");
        if (emptyLayoutItems.length > 0) {
            item = $($(emptyLayoutItems.get(0)));
        } else {
            item = $(".layout-item").first();
        }
        return item.attr("data-id");
    }

    function loadLayoutItemContent(id, contentId, itemId) {
        var item = $("[data-id=" + itemId + "]");
        $.get("${prefix}/renderLayoutItemContent?id=" + id, function (contentHtml) {
            var ch = $(contentHtml);
            var dragOverlay = $("<div/>").attr({"class": "smart-widget-overlay"});
            dragOverlay.attr("data-widget-id", contentId);
            ch.append(dragOverlay);
            item.append(ch);
        });
    }

    function onInstanceAdd(contentId) {
        var itemId = guessItemId();
        $.post("${prefix}/saveContent", {
            layoutId: "${layout.id}",
            layoutItemId: itemId,
            contentType: "WIDGET",
            contentId: contentId
        }, function (content) {
            loadLayoutItemContent(content.id, content.contentId, itemId);
            SP.closeAllModal();
        }, "json");
    }

    function onWidgetAdd(widgetName) {
        var itemId = guessItemId();
        $.post("${prefix}/addWidget", {
            widgetName: widgetName,
            itemId: itemId
        }, function (content) {
            loadLayoutItemContent(content.id, content.contentId, itemId);
            SP.closeAllModal();
        }, "json");
    }

    var getSelectedWidget = function () {
        return $(".smart-widget-overlay-selected").closest(".smart-widget");
    };

    var getSelectedWidgetId = function () {
        return getSelectedWidget().attr("data-content-id");
    };

    function savePreference(args) {
        $.ajax({
            url: "${prefix}/saveWidgetPreferences?widgetId=" + getSelectedWidgetId(),
            type: "post",
            data: JSON.stringify(args),
            dataType: "json",
            contentType: "application/json",
            processData: false,
            success: function () {
                location.reload();
            }
        });
    }

    $(function () {
        $(".smart-widget").each(function () {
            var dragOverlay = $("<div/>").attr({"class": "smart-widget-overlay"});
            dragOverlay.attr("data-widget-id", $(this).attr("data-widget-id"));
            $(this).append(dragOverlay);
        });

        $(".smart-widget-overlay").live("click", function () {
            $(".smart-widget-overlay").not($(this)).removeClass("smart-widget-overlay-selected");
            $(this).toggleClass("smart-widget-overlay-selected");
            if ($(".smart-widget-overlay-selected").length > 0) {
                $("#removeWidget").removeClass("disabled");
                var id = getSelectedWidget().attr("data-id");
                $("#editors").load("${prefix}/editContent?r=" + Math.random() + "&id=" + id, function () {
                    if ($("#editors").find("[name='hasPreference']").val() == 'true') {
                        $("#editWidget").removeClass("disabled");
                    } else {
                        $("#editWidget").addClass("disabled");
                    }
                    initEditorEvent();
                });
            } else {
                $("#removeWidget").addClass("disabled");
                $("#editWidget").addClass("disabled");
                $("#editors").empty();
            }
        });

        var removeWidget = function () {
            var content = getSelectedWidget();
            if (content.size() > 0) {
                var id = content.attr("data-id");
                $.post("${prefix}/removeContent", {id: id}, function () {
                    content.detach();
                });
            }
        };

        $(window).keydown(function (event) {
            if (event.keyCode == 46) {
                removeWidget();
            }
        });

        $("#removeWidget").click(function () {
            removeWidget();
        }.bind(this));

        var widgetModalCache = {};

        $("#editWidget").click(function () {
            var widgetId = getSelectedWidgetId();
            if (!widgetId || $(this).hasClass("disabled")) {
                return;
            }
            var modal = widgetModalCache[widgetId];
            if (!modal) {
                modal = SP.modal({
                    title: "编辑组件",
                    url: "${prefix}/widgetPreference?widgetId=" + widgetId +"&layoutId=${layout.id}",
                    onSubmit: "_on_preference_submit"
                });
                widgetModalCache[widgetId] = modal;
            }
            modal.modal("show");
        });

        $(".layout-item").sortable({
            connectWith: ".layout-item",
            placeholder: "smart-widget-placeholder",
            start: function (event, ui) {
                $(".smart-widget-placeholder").height(ui.item.height());
            },
            stop: function (event, ui) {
                var itemContents = [];
                $(".layout-item").each(function () {
                    var widgets = $(this).find(".smart-widget");
                    if (widgets.length > 0) {
                        var layoutItemId = $(this).attr("data-id");
                        for (var i = 0; i < widgets.length; i++) {
                            var widget = $(widgets.get(i));
                            itemContents.push({
                                layoutItemId: layoutItemId,
                                id: widget.attr("data-id"),
                                weight: i
                            })
                        }

                    }
                });
                $.ajax({
                    url: "${prefix}/updateLayoutItemContents",
                    type: "post",
                    data: JSON.stringify(itemContents),
                    dataType: "json",
                    contentType: "application/json",
                    processData: false
                });
            }
        }).disableSelection();
    })
</script>
</#macro>

<#macro initLayout>
    <#assign prefix><@spring.url relativeUrl="/sp"/></#assign>
    <#if layout.cellBorder??>
    <style type="text/css">
        .grid-stack-item-content {
            border: ${layout.cellBorder.toString()};
        }
    </style>
    </#if>
    <@ui.styleSheet styleEntitys=layoutItems prefix="layout-item"/>
<script>
    $(function () {

        $("#editors").load("${prefix}/editLayout?r=" + Math.random() + "&id=${layout.id}", initEditorEvent);

        var _this = this;
        var updating = false;

        var _layoutItems = ${layoutItemsJson} || [];
        var serialization = [];
        for (var i = 0; i < _layoutItems.length; i++) {
            var li = _layoutItems[i];
            var cfg = li.config;
            serialization.push({id: li.id, x: cfg.x, y: cfg.y, width: cfg.width, height: cfg.height});
        }

        this.serialization = serialization.length > 0 ? GridStackUI.Utils.sort(serialization) : serialization;

        this.saveLayoutItems = function (nodes) {
            if (!updating) {
                var items = [];
                for (var i = 0; i < nodes.length; i++) {
                    var node = nodes[i];
                    var el = node.el;
                    var id = el.attr("data-id");
                    var layoutItem = {
                        layoutId: "${layout.id}",
                        config: {
                            x: node.x,
                            y: node.y,
                            width: node.width,
                            height: node.height
                        }
                    };
                    if (id) {
                        layoutItem.id = id;
                    }
                    items.push(layoutItem);
                }

                updating = true;
                $.ajax({
                    url: "${prefix}/saveLayoutItems",
                    type: "post",
                    data: JSON.stringify(items),
                    dataType: "json",
                    contentType: "application/json",
                    processData: false,
                    success: function (items) {
                        updating = false;
                        for (var i = 0; i < items.length; i++) {
                            nodes[i].el.attr("data-id", items[i].id);
                            nodes[i].el.addClass("layout-item-" + items[i].id);
                        }
                    }
                });
            }
        }.bind(this);

        this.grid = $('.grid-stack').gridstack({
            cellHeight: ${RequestParameters.cellHeight!layout.cellHeight},
            verticalMargin: 0,
            animate: true
        }).on('change', function (event, items) {
            if (items && items.length > 0) {
                _this.saveLayoutItems(items);
            }
        }).data('gridstack');

        this.removeAll = function () {
            this.grid.removeAll();
        }.bind(this);

        this.loadItems = function () {
            var _self = this;
            this.removeAll();
            $.each(this.serialization, function () {
                var node = this;
                _self.addItem(node.x, node.y, node.width, node.height, false, node.id);
            });
        }.bind(this);

        this.addItem = function (x, y, width, height, autofit, id) {
            var widgetInstance = $('<div><div class="grid-stack-item-content"/></div>');
            if (id) {
                widgetInstance.attr("data-id", id);
                widgetInstance.attr("id", "layout-item-" + id);
            }
            this.grid.addWidget(widgetInstance, x, y, width, height, autofit);
            $.ajax({
                url: "${prefix}/renderLayoutItem?layoutItemId=" + id,
                type: "get",
                contentType: "text/plain;charset=UTF-8",
                success: function (html) {
                    widgetInstance.find(".grid-stack-item-content").html(html);
                    var dragOverlay = $("<div/>").attr({"class": "smart-widget-overlay"});
                    var widget = widgetInstance.find(".smart-widget");
                    widget.append(dragOverlay);
                    dragOverlay.height(widget.height());
                }
            });
        }.bind(this);

        this.removeItem = function () {
            var selected = $(".grid-stack-item-content-selected");
            if (selected.length == 0) {
                return;
            }
            $(selected).each(function () {
                var widgetInstance = $(this).hasClass(".grid-stack") ? $(this) : $(this).closest(".grid-stack-item");
                if (widgetInstance && widgetInstance.length > 0) {
                    var itemId = widgetInstance.attr("data-id");
                    $.ajax({
                        url: "${prefix}/removeLayoutItem?id=" + itemId,
                        async: false,
                        type: "post",
                        success: function () {
                            _this.grid.removeWidget(widgetInstance);
                        }
                    });
                    $("#removeItem").addClass("disabled");
                }
            });
        }.bind(this);

        this.toggleSelected = function () {
            $(".grid-stack-item-content").not($(this)).removeClass("grid-stack-item-content-selected");
            $(this).toggleClass("grid-stack-item-content-selected");
            if ($(this).hasClass("grid-stack-item-content-selected")) {
                $("#removeItem").removeClass("disabled");
                var itemId = $(this).closest(".grid-stack-item").attr("data-id");
                $("#editors").load("${prefix}/editLayoutItem?r=" + Math.random() + "&id=" + itemId, initEditorEvent);
            } else {
                $("#removeItem").addClass("disabled");
                $("#editors").load("${prefix}/editLayout?r=" + Math.random() + "&id=${layout.id}", initEditorEvent);
            }
        };

        $(".grid-stack-item-content").live("click", this.toggleSelected);

        $("#removeItem").click(function () {
            if ($(this).not(".disabled")) {
                _this.removeItem();
            }
        });

        $(window).keydown(function (event) {
            if (event.keyCode == 46) {
                _this.removeItem();
            }
        });

        $("#addItem").click(function () {
            this.addItem(0, 0, 1, 1, true);
        }.bind(this));

        this.loadItems();
    });
</script>
</#macro>

<#macro control east activeStep=0>
    <@panelLayoutScript/>
<div id="designer" class="step${activeStep}">
    <div id="north">
        <@ui.controlWizard activeStep=activeStep/>
    </div>
    <div id="center">
        <#nested/>
    </div>
    <div id="east">
    ${east}
        <div id="editors">

        </div>
    </div>
</div>
</#macro>

<#macro designer east activeStep=0>
    <@panelLayoutScript/>
<div id="designer" class="step${activeStep}">
    <div id="north">
        <@ui.designerWizard activeStep=activeStep/>
    </div>
    <div id="center">
        <#nested/>
    </div>
    <div id="east">
    ${east}
        <div id="editors">

        </div>
    </div>
</div>
</#macro>

<#macro borderEditor title prefix border>
<#-- @ftlvariable name="border" type="com.fable.sp.core.domain.Border" -->
<h6 class="text-muted">${title}</h6>
<div class="form-group form-group-sm">
    <div class="col-sm-3 control-label">宽度</div>
    <div class="col-sm-6">
        <input type="text" class="form-control validate[custom[integer]]" placeholder="数值" value="${border.width}"
               name="${prefix}.width">
    </div>
    <div class="col-sm-3 form-control-static">像素</div>
</div>
<div class="form-group form-group-sm">
    <div class="col-sm-3 control-label">线条</div>
    <div class="col-sm-9">
        <select class="form-control" name="${prefix}.style">
            <option value="SOLID" <#if !border.style?has_content || border.style=='SOLID'>selected</#if>>实线</option>
            <option value="DOTTED" <#if border.style=='DOTTED'>selected</#if>>虚线</option>
        </select>
    </div>
</div>
<div class="form-group form-group-sm">
    <div class="col-sm-3 control-label">颜色</div>
    <div class="col-sm-9">
        <@colorpicker value="${border.color}" name="${prefix}.color"/>
    </div>
</div>
</#macro>

<#macro colorpicker name value="#FFFFFF">
<div class="input-group colorpicker-component">
    <input type="text" name="${name}" value="${value}" class="form-control" placeholder="色值"/>
    <span class="input-group-addon"><i></i></span>
</div>
</#macro>

<#macro styleEditor styleEntity formAction title>
<#-- @ftlvariable name="styleEntity" type="com.fable.sp.core.domain.StyleEntity" -->
    <@panel id="styleEditor" title=title class="">
    <form class="form-horizontal" action="${formAction}">

        <input type="hidden" name="id" value="${styleEntity.id}">
        <#assign style = styleEntity.style!/>
        <#assign align = style.textAlign!/>
        <#assign border = style.border!/>
        <h5>对齐</h5>
        <div class="form-group form-group-sm">
            <div class="col-sm-3 control-label">文本</div>
            <div class="col-sm-9">
                <@textalign align/>
            </div>
        </div>
        <h5>边框</h5>
        <#assign borderTop = border.top!/>
        <@borderEditor border=borderTop title="上边框" prefix="style.border.top"/>
        <#assign borderRight = border.right!/>
        <@borderEditor border=borderRight title="右边框" prefix="style.border.right"/>
        <#assign borderBottom = border.bottom!/>
        <@borderEditor border=borderBottom title="下边框" prefix="style.border.bottom"/>
        <#assign borderLeft = border.left!/>
        <@borderEditor border=borderLeft title="左边框" prefix="style.border.left"/>
        <hr/>
        <h5>背景</h5>
        <#assign background=style.background!/>
        <div class="form-group form-group-sm">
            <div class="col-sm-3 control-label">颜色</div>
            <div class="col-sm-9">
                <@colorpicker value="${background.color}" name="style.background.color"/>
            </div>
        </div>
        <div class="form-group form-group-sm">
            <div class="col-sm-3 control-label">图片</div>
            <div class="col-sm-9">
                <input type="text" class="form-control" placeholder="图片地址" value="${background.url}"
                       name="style.background.url">
            </div>
        </div>
        <#assign position=background.position!/>
        <div class="form-group form-group-sm">
            <div class="col-sm-3 control-label">位置</div>
            <div class="col-sm-1 control-label">上</div>
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="值" value="${position.top}"
                       name="style.background.position.top">
            </div>
            <div class="col-sm-1 control-label">右</div>
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="值" value="${position.right}"
                       name="style.background.position.right">
            </div>
        </div>
        <div class="form-group form-group-sm">
            <div class="col-sm-3 control-label"></div>
            <div class="col-sm-1 control-label">下</div>
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="值" value="${position.bottom}"
                       name="style.background.position.bottom">
            </div>
            <div class="col-sm-1 control-label">左</div>
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="值" value="${position.left}"
                       name="style.background.position.left">
            </div>
        </div>
        <hr/>
        <#assign font=style.font!/>
        <h5>文字</h5>
        <div class="form-group form-group-sm">
            <div class="col-sm-3 control-label">大小</div>
            <div class="col-sm-6">
                <input type="text" class="form-control validate[custom[integer]]" placeholder="大小"
                       value="${font.size}" name="style.font.size">
            </div>
            <div class="col-sm-3 form-control-static">像素</div>
        </div>
        <div class="form-group form-group-sm">
            <div class="col-sm-3 control-label">字体</div>
            <div class="col-sm-9">
                <input type="text" class="form-control" placeholder="字体" value="${font.family}"
                       name="style.font.family">
            </div>
        </div>
        <div class="form-group form-group-sm">
            <div class="col-sm-3 control-label">颜色</div>
            <div class="col-sm-9">
                <@colorpicker value="${font.color}" name="style.font.color"/>
            </div>
        </div>
        <div class="form-group form-group-sm">
            <div class="col-sm-3 control-label">粗细</div>
            <div class="col-sm-9">
                <input type="text" class="form-control validate[custom[integer]]" placeholder="数值"
                       value="${font.weight}" name="style.font.weight">
            </div>
        </div>
        <hr/>
        <h5>内间距(像素)</h5>
        <#assign padding=style.padding!/>
        <div class="form-group form-group-sm">
            <div class="col-sm-3 control-label">上</div>
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="值" value="${padding.top}"
                       name="style.padding.top">
            </div>
            <div class="col-sm-3 control-label">右</div>
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="值" value="${padding.right}"
                       name="style.padding.right">
            </div>
        </div>
        <div class="form-group form-group-sm">
            <div class="col-sm-3 control-label">下</div>
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="值" value="${padding.bottom}"
                       name="style.padding.bottom">
            </div>
            <div class="col-sm-3 control-label">左</div>
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="值" value="${padding.left}"
                       name="style.padding.left">
            </div>
        </div>
        <hr/>
        <h5>外间距(像素)</h5>
        <#assign margin=style.margin!/>
        <div class="form-group form-group-sm">
            <div class="col-sm-3 control-label">上</div>
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="值" value="${margin.top}"
                       name="style.margin.top">
            </div>
            <div class="col-sm-3 control-label">右</div>
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="值" value="${margin.right}"
                       name="style.margin.right">
            </div>
        </div>
        <div class="form-group form-group-sm">
            <div class="col-sm-3 control-label">下</div>
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="值" value="${margin.bottom}"
                       name="style.margin.bottom">
            </div>
            <div class="col-sm-3 control-label">左</div>
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="值" value="${margin.left}"
                       name="style.margin.left">
            </div>
        </div>
        <hr/>
        <#if styleEntity.getClass().getName() == 'com.fable.domain.Layout'>
            <h5>个性化样式表</h5>
            <div>
                <textarea class="form-control" placeholder="个性化样式" rows="5"
                          name="customCss">${styleEntity.customCss!}</textarea>
            </div>
        </#if>
    </form>
    </@panel>
</#macro>

<#macro itemContent value>
<div class="smart-widget" data-id="${value.id}" data-content-id="${value.contentId}"
     id="layout-item-content-${value.id}" data-content-type="${value.contentType}">
${value.content}
</div>
</#macro>

<#macro textalign align>
<#-- @ftlvariable name="align" type="com.fable.sp.core.domain.Align" -->
<div class="btn-group-sm aligns">
    <button type="button" class="btn btn-default<#if align=="left"> active</#if>" data-align="LEFT">
        <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
    </button>
    <button type="button" class="btn btn-default<#if align=="center"> active</#if>" data-align="CENTER">
        <span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
    </button>
    <button type="button" class="btn btn-default<#if align=="right"> active</#if>" data-align="RIGHT">
        <span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
    </button>
    <input type="hidden" name="style.textAlign" value="${align?upper_case}">
</div>
</#macro>

<#macro styleSheet styleEntitys prefix>
    <#if styleEntitys?has_content>
    <style type="text/css">
            <#list styleEntitys as styleEntity>
            <#-- @ftlvariable name="styleEntity" type="com.fable.sp.core.domain.StyleEntity" -->
                <#if styleEntity?has_content && styleEntity.style?has_content>
                #${prefix}-#{styleEntity.id} {
                ${styleEntity.style.toString()}
                }
                </#if>
            </#list>
    </style>
    </#if>
</#macro>